<template>
  <vue-draggable class="drag-area" tag="div" v-model="currentValue" group="people" chosenClass="chosen" ghostClass="ghost">
    <div v-for="el in currentValue" :key="el.id">
      <a-col :id="el.id" :span="el.conf.width" v-bind:class="[currentChooseId == el.id ? chosen : '']" @click="choose" style="position: relative; z-index: 1000">
        <a-button type="link" v-if="currentChooseId == el.id" style="position: absolute; top: 0; right: 10px; z-index: 2000" @click="deleteEl">
          delete
        </a-button>
        <!--自定义组件-->
        <component :is="el.tag" :item="el" :data="data" v-if="el.type === 'custom'"></component>
        <a-form-model-item :label="el.conf.tagName" @click="choose" v-else>
          <a-component :data="data" :item="el"></a-component>
        </a-form-model-item>
      </a-col>
    </div>
  </vue-draggable>
</template>

<script>
  import { VueDraggable } from 'vue-draggable-plus';
  import store from '../../../store';

  export default {
    name: 'FormDesigner',
    components: {
      VueDraggable,
    },
    props: {
      parentId: {
        type: String,
        required: true,
      },
      item: [],
      data: {},
    },
    data() {
      return {
        //定义要被拖拽对象的数组
        currentValue: [],
        chosen: 'chosen',
        currentChooseId: null,
        currentConfig: {}, //选中的组件配置内容
      };
    },
    created() {
      this.currentValue = this.item;
    },
    methods: {
      choose(e) {
        this.currentChooseId = e.target.id && e.target.id !== '' ? e.target.id : this.getFirstParentId(e.target.parentElement);
        //把当前选中组件提交到vuex
        store.commit('choose/currentChooseId', this.currentChooseId);
        //缓存当前选中数据
        for (const item of this.currentValue) {
          this.setCurrentConfig(item, this.currentChooseId);
          if (this.currentConfig.id === this.currentChooseId) {
            store.commit('choose/currentChooseData', this.currentConfig);
            break;
          }
        }
      },
      getFirstParentId(el) {
        if (!el) {
          return 'el null';
        }
        return el.id && el.id !== '' ? el.id : this.getFirstParentId(el.parentElement);
      },
      deleteEl() {
        this.deletedChoose(this.currentValue, this.currentChooseId, false);
        //把当前删除组件提交到vuex
        store.commit('choose/deletedChooseId', this.currentChooseId);
      },
      deletedChoose(arr, val, flag) {
        if (flag) {
          return true;
        }
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].id == val) {
            this.$delete(arr, i);
            return true;
          }
          if (arr[i].subItem && arr[i].subItem.children && arr[i].subItem.children.length > 0) {
            return this.deletedChoose(arr[i].subItem.children, val, false);
          } else if (arr[i].subItems && arr[i].subItems.length > 0) {
            for (const subItem of arr[i].subItems) {
              if (subItem.children && subItem.children.length > 0) {
                return this.deletedChoose(subItem.children, val, false);
              }
            }
          }
        }
        return false;
      },

      setCurrentConfig(obj, val) {
        if (obj.id == val) {
          this.currentConfig = obj.conf;
          this.currentConfig.id = obj.id;
          return;
        }
        if (obj.subItem && obj.subItem.children && obj.subItem.children.length > 0) {
          for (const item of obj.subItem.children) {
            this.setCurrentConfig(item, val);
          }
        } else if (obj.subItems && obj.subItems.length > 0) {
          for (const subItem of obj.subItems) {
            if (subItem && subItem.children && subItem.children.length > 0) {
              for (const item of subItem.children) {
                this.setCurrentConfig(item, val);
              }
            }
          }
        }
      },
    },
    computed: {
      chooseId() {
        return store.getters['choose/currentChooseId'];
      },
      currentChooseData() {
        return store.getters['choose/currentChooseData'];
      },
    },
    watch: {
      currentChooseData: {
        deep: true, // 深度监听
        immediate: true, //立即执行
        handler(nval) {
          for (const item of this.currentValue) {
            if (item.id === nval.id) {
              item.conf = nval;
              break;
            }
          }
        },
      },
      currentValue: {
        deep: true, // 深度监听
        immediate: true, //立即执行
        handler(nval) {
          //写入缓存
          const data = store.getters['draggable/data'] ? JSON.parse(store.getters['draggable/data']) : {};
          data[this.parentId] = nval;
          store.dispatch('draggable/updateDraggableData', JSON.stringify(data));
        },
      },
      chooseId: {
        deep: true, // 深度监听
        immediate: true, //立即执行
        handler(nval) {
          this.currentChooseId = nval;
        },
      },
    },
  };
</script>

<style scoped>
  .chosen {
    background-color: #f1f1f1;
    color: #333;
  }

  .ghost {
    background-color: #e6f7ff;
  }
</style>
